<template>
  <view class="warp">
    <!-- background pic start -->
    <view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
      <image :src="imgBaseUrl + 'bg-1.png'" mode="widthFix" class="bg-img"></image>
      <view class="logo-contnt flex align-center justify-center flex-direction">
        <view class="logo width-180 height-180"></view>
        <!-- <view>欢迎来到fust-UI</view> -->
      </view>
    </view>
    <!-- background pic end -->
	
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/phone.png'" mode="widthFix"></image>
      <input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
        :placeholder="i18n['请输入手机号']" name="input" />
    </view>
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/yzm.png'" mode="widthFix"></image>
      <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
          type="number" v-model="vercode" :placeholder="i18n['请输入验证码']" minlength="4"/>
        <view class="text-vecode" @click="handleSendVerCode">
          {{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}
        </view>
      </view>
    </view>
    <view class="flex align-center justify-end text-333 padding-right margin-top-sm">
      <view @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/login-password/index">{{i18n['密码登录']}}</view>
    </view>
    <!-- 密码login end -->
    <!-- 立即登录按钮 start -->
    <button type="success" class="text-white margin-lr-lg margin-top-lg bg-theme fu-fs32 round"
      shape="circle" @click="handleLogin">
      {{i18n['登录']}}
    </button>
    <!-- 立即登录按钮 end -->
		<!-- 快捷登陆 start -->
		<ThirdLogin :check="is_select_agree" v-if="is_show != 1"></ThirdLogin>
		<!-- 快捷登陆 end -->
    <view class="margin-top flex align-center justify-center text-999 fu-fs28">
      <view class="margin-right" @tap="handleJump" data-type="REDIRECT" :data-url="'/pages/user/login/register/index'">{{i18n['注册账号']}}</view>
      <view class="padding-left solids-left" @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/forget/index">{{i18n['忘记密码']}}</view>
    </view>
    <view class="footer">
      
      <!-- 协议同意 start -->
      <view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree" :src="imgBaseUrl + 'checked.png'"></image>
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
          :src="imgBaseUrl + 'unchecked.png'"></image>
        <view>
          {{i18n['已阅读并同意']}}
          <text class="text-theme text-bold" @tap="handleJump"
            data-url="/pages/user/login/user-agreement/index?id=1">《用户协议》</text>
          {{i18n['与']}}
          <text class="text-theme text-bold" @tap="handleJump"
            data-url="/pages/user/login/user-agreement/index?id=2">{{i18n['《隐私政策》']}}</text>
        </view>
      </view>
      <!-- 协议同意 end -->
    </view>
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->

  </view>
</template>

<script>
  // 引入验证方法
  import {
    validate
  } from "@/common/utils/index";
  import {
  	SYSTEM_CONFIG
  } from "@/common/config.js";
  import ThirdLogin from '../../components/third-login/third-login.vue';
  export default {
    components: {
      ThirdLogin
    },
    data() {
      return {
        is_select_agree: false,
        phone: '', // 手机号,@String
        vercode: '', // 验证码,@String
        isLoading: false, // 立即登录按钮是否点击,@Boolean
        time: 60, // 倒计时60S,@Number
        beginning: false, // 显示倒计时,@Boolean
        timer: null, // 计时器,@Function
				isShow2:false,
				msg:'',
				is_show:0,
      };
    },
    onLoad() {
			// #ifdef APP-PLUS || H5
			this.is_show = 1
			this.getHiddenInterface()
			// #endif
    },
    onUnload() {
      // 页面关闭时清除计时器，优化性能
      clearInterval(this.timer);
    },
    methods: {
			// 上架隐藏
			getHiddenInterface(){
				this.$api.post(global.apiUrls.hiddenInterface,{code: 'is_show'}).then(res=>{
					if(res.data.code == 1){
						this.is_show = res.data.data
						if(res.data.data == 1){
							uni.setTabBarItem({
										  index: 1,
											visible:false
							})
						}else{
							uni.setTabBarItem({
										  index: 1,
											visible:true
							})
						}
					}
				})
			},
		kt(){
			uni.redirectTo({
				url:'/pages/member/vip/vip/index'
			})
		},
		// 取消登录
		cancle() {
			uni.navigateBack();
		},
      /**
       * @param 是否选择同意协议
       */
      handle_select() {
        this.is_select_agree = !this.is_select_agree
      },
      /**
       * @event 立即登录按钮点击事件
       */
      handleLogin() {
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
        // #ifdef APP-PLUS
        // @desc 隐藏安全键盘
        plus.key.hideSoftKeybord();
        // #endif
        
        // 结构出来phone手机号，vercode验证码
        let {
          phone,
          vercode
        } = this;
        // 如果手机号为空就提示用户
        if (!phone) return this.$message.info(this.i18n['请输入手机号']);
        // 手机号不符合正则验证
        if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
        // 如果验证码为空就提示用户
        if (!vercode) return this.$message.info(this.i18n['验证码不能为空']);
        
        let clientId = 'clientId'
        let appSystem = 'appSystem'
        
        // #ifdef APP-PLUS
        clientId =  '';
        appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
        // #endif
        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
        /**
         * @desc 请求验证码登录接口
         * @param {String} global.apiUrls.postUserMobileLogin - 请求的接口,v1/5c78dca45ebc1,
         * @param {Object} {} - 携带参数
         * @param {String} {}.mobile - 手机号
         * @param {String} {}.code - 验证码
         */
        this.$api
          .post(global.apiUrls.postUserMobileLogin, {
            mobile: phone,
            code: vercode,
            user_source: SYSTEM_CONFIG.platform,
            clientId,
            appSystem
          })
          .then(res => {
            // 如果返回code码为1，且数据存在
            if (res.data.code == 1 && res.data.data) {
				
				if(res.data.msg!='登录成功'){
					this.$store.commit('updateUserInfo', res.data.data.userinfo);
					this.msg = res.data.msg
					// this.isShow2 = true
					
					return
				}
              // 提示用户，后台返回的信息
              this.$message.info(res.data.msg);
              /**
               * @desc 向Vuex发送事件
               * @param {Object} res.data.data.userinfo - 后台返回来的用户信息
               */
              this.$store.commit('updateUserInfo', res.data.data.userinfo);
              setTimeout(() => {
                // 把按钮的状态改为false
                this.isLoading = false;
                // 延迟800ms后返回
                uni.navigateBack();
              }, 800);
            } else {
              // 把按钮的状态改为false
              this.isLoading = false;
              // 错误的情况下向用户发送后台返回来的长度
              this.$message.info(res.data.msg);
            }
          }).catch(err => {
            // 把按钮的状态改为false
            this.isLoading = false;
          });
      },
      /**
       * @event 发送验证码
       */
      handleSendVerCode() {
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        // 如果有倒计时，return false
        if (this.beginning) return;
        if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
        // 从this里结构出来phone
        let {
          phone
        } = this;

        if (!phone) return this.$message.info(this.i18n['请输入手机号']);
        // 如果手机号不正确就提示用户
        if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
        /**
         * @desc 请求验证码接口
         * @param {Object} {} - 参数
         * @param {Boolean} {}.is_test - 是否是测试环境
         * @param {String} {}.mobile - 手机号
         * @param {String} {}.type - 类型
         */
        this.$api
          .post(global.apiUrls.GetVerifyCode, {
            is_test: global.IS_DEV,
            mobile: phone,
            type: '3'
          })
          .then(res => {
            // 如果后台返回的code码为1
            if (res.data.code == 1) {
              this.beginning = true;
              // 清除倒计时,防抖作用
              clearInterval(this.timer);
              this.timer = setInterval(() => {
                if (this.time == 1) {
                  //倒计时结束就清楚这个倒计时
                  clearInterval(this.timer);
                  this.time = 60; // 倒计时60s
                  this.beginning = false; // 是否显示倒计时改为false
                  return;
                }
                this.time--;
              }, 1000);
              // 向用户发送提示
              if (res.data.data.code) {
                if(global.IS_DEV == 1){
                  this.$message.info(this.i18n['验证码为'] + res.data.data.code + this.i18n['请注意查收']);
                  this.vercode = res.data.data.code;
                }else{
                  this.$message.info( '验证码发送成功，请注意查收' )
                }
              }
              // 把按钮的状态改为false
              this.isLoading = false;
            } else {
              this.beginning = false; // 是否显示倒计时改为false
              // 把按钮的状态改为false
              this.isLoading = false;
              // 如果报错，向用户提示
              this.$message.info(res.data.msg);
            }
          })
          .catch(function(err) {
            // 把按钮的状态改为false
            this.isLoading = false;
          });
      },
    }
  };
</script>

<style lang="scss" scoped>
  // 主体 start
  .warp {
    background: #fff;
    min-height: 100vh;
    overflow: hidden;
    // background pic start
    .bg {
      width: 100%;
      position: relative;
      .bg-img {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
      }
      .logo-contnt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .logo {
          background-image: url(https://localelife.chunchuangkeji.cn/h5img/logo.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          border-radius: 40rpx;
          overflow: hidden;
        }
      }
    }
    // background pic end
    // 验证码login end
  }
  // 主体 end
  .footer{
    position: fixed;
    bottom: 116rpx;
    bottom: calc(116rpx + constant(safe-area-inset-bottom));
    bottom: calc(116rpx + env(safe-area-inset-bottom));
    width: 100%;
  }
  .ts-box{
  	padding: 44rpx;
  	width: 510rpx;
  	// height: 424px;
  	background: #FFFFFF;
  	border-radius: 24rpx;
  	opacity: 1;
  }
  .tc-btn{
  	width: 308rpx;
  	height: 80rpx;
  	background: #B82441;
  	border-radius: 44rpx;
  	text-align: center;
  	line-height: 80rpx;
  	opacity: 1;
  	color: #ffffff;
  	margin-top: 48rpx;
  }
</style>
